<template>
  <i-circle :percent="percent" :stroke-color="color">
    <Icon v-if="percent >= 100" type="ios-checkmark" :size="60" style="color:#5cb85c" />
    <Icon v-else-if="percent <= 1" type="ios-close" :size="50" style="color:#ff5500" />
    <span v-else style="font-size:24px">{{ percent }}%</span>
  </i-circle>
</template>

<script>
export default {
  name: 'circle-1',
  props: {
    percent: {
      type: Number,
      default: 50
    },
    color: {
      type: String,
      default: '#2db7f5'
    }
  }
}
</script>
